<template>
	<view class="apps">
		<view class="bgwhite mlr20">
			<uv-input
				@confirm="seachText"
				v-model="searchValue"
				placeholder="请输入搜索内容"
				suffixIcon="search"
				suffixIconStyle="color: #909399"
			></uv-input>
		</view>
		<view class="mlr10 pt20 bgwhite bdr20 flex fdc">
			<uv-sticky bgColor="#fff">
				<view class="flex fdc">
				<uv-tabs :list="categorys" lineWidth="30" @click="handleTabs" keyName="title"
				lineColor="#f5c185" 
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize:'14px',
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)',
					fontSize:'14px',
				}" 
				itemStyle="padding-left: 15rpx; padding-right: 15rpx; height: 60rpx;font-size:14px;">
				</uv-tabs>
				<view class="mt20 t3hd">
					<view  :class="activeTag == 0 ?`customTag active`:`customTag`" @click="handleTag(0)">所有</view>
					<view :class="activeTag == item.tags_id ?`customTag active`:`customTag`" v-for="(item,index) in tags " :key="index"  @click="handleTag(item.tags_id)">{{item.title}}</view>
				</view>
				</view>
			</uv-sticky>
			<view class="mt20">
			<uv-grid :border="false" col="2" v-if="list.length > 0">
				<uv-grid-item @click="handle('/pages/index/detail?id='+item.id)" v-for="(item,index) in list">
					<view class="flex fdc mb20 pr plr10">
						<image :src="item.activity.image" mode="widthFix" style="width: 345rpx; height:442rpx;"></image>
						<view class="activePositon">
							<view class="pb10 flex aic" v-if="item.activity.tags.length >0">
								<view class="plr10 ptb05 mr10 bdr20 c333 f22r" :style="`background-color:`+tag.bgcolor+ `;`" v-for="(tag,i) in item.activity.tags" :key="i">{{tag.tag_name}}</view>
							</view>
							<view class="f26r fw600 c333">{{item.activity.title}}</view>
							<view class="f22r flex t3hd c999">{{item.activity.description}}</view>
							<view class="flex aic">
								<uv-avatar size='18' :src="item.user.avatar"></uv-avatar><view class="ml10 f22r c999">{{item.user.nickname}}</view>
							</view>
							<view class="flex jcsb aic">
								<view class="flex">
									<view class="flex mr10" v-if="item.regist_type.includes('audience')">
										<uv-badge :isDot="true" type="success"></uv-badge><view class="f22r c999">观众报名中</view>
									</view>
									<view class="flex mr10" v-if="item.regist_type.includes('volunteer')">
										
										<uv-badge :isDot="true" type="error" v-if="item.voters_count >= item.voters"></uv-badge>
										<uv-badge :isDot="true" type="success" v-else></uv-badge>
										<view class="f22r c999" v-if="item.voters_count >= item.voters">志愿者已满</view><view class="f22r c999">志愿者报名中</view>
										
									</view>
								</view>
								<view v-if="item.regist_type.includes('audience') && item.tickets.includes('0')">
									<uv-tags text="FREE" type="success" plain plainFill size="mini"></uv-tags>
								</view>
							</view>
						</view>
					</view>
				</uv-grid-item>
			</uv-grid>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { util } from '@/common/util.js'
	import { ref , reactive, nextTick, computed } from 'vue'
	import { onLoad, onShow, onHide,onReachBottom } from '@dcloudio/uni-app'
	const searchValue=ref(""),list=ref([]),categorys=ref([{title:'全部',follow:0,category_id:0,is_login:0}]),tags=ref([]),activeTag=ref(0);
	let arrs = reactive({
		page:1,
		category_id:0,
		follow:0,
		is_login:0,
		more:true,
		tag_ids:0,
		keywords:"",
	})
	const getCategory = () =>{
		util.request({url:'/index/category',type:'get'}).then((rlt) =>{
			categorys.value.push(...rlt.data);
			console.log(categorys.value);
		})
	}, getTags = () =>{
		util.request({url:'/index/tags',type:'get'}).then((rlt) =>{
			tags.value=rlt.data;
			console.log(tags.value);
		})
	}, getList = ()=>{
		arrs.tag_ids = activeTag.value;
		util.request({url:"/index/times",type:"post",data:arrs}).then((rlt)=>{
			if(rlt.code == 1){
				if(arrs.page == 1){
					list.value =rlt.data
				}else{
					list.value.push(... rlt.data);
				}
				if(rlt.data.length<10){
					arrs.more=false
				}
				arrs.page++;
			}
		})
	},seachText = ()=>{
		arrs.page = 1;
		arrs.more =true;
		arrs.keywords = searchValue.value;
		getList();
	}, handleTabs = (e) =>{
		arrs = Object.assign(arrs,e);
		arrs.keywords = searchValue.value;
		arrs.page = 1;
		arrs.more = true;
		getList()
		
	},handleTag = (e)=>{
		activeTag.value = e;
		arrs.page  =1;
		arrs.more = true;
		getList();
	}
	onLoad((e)=>{
		console.log(e);
		if(e.tagid){
			activeTag.value = e.tagid;
		}
		getTags()
		getCategory();
		getList();
	})
	onReachBottom(()=>{
		if(arrs.more){
			getList()
		}
	})
</script>

<style scoped lang="scss">
	.activePositon{position: absolute;padding:10rpx; bottom:10rpx;left:2rpx;right:1rpx;display: flex; flex-direction: column;background:linear-gradient(to bottom,rgb(255,255,255,0.3),rgb(255,255,255,0.1));}
	.customTag{font-size:26rpx; border-width:1rpx;border-color:#999;color:#333;background-color:#dcdcdc; padding:6rpx 12rpx; margin:0 10rpx; display:inline-block; border-radius:10rpx;}
	.customTag.active{border-color:#ec8c33;background-color:#ecbe96 ;font-weight:600;}
</style>
